<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>WingPick Pro - 报价单预览</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1976D2',
                        'primary-variant': '#0D47A1',
                        secondary: '#FF6F00',
                        'secondary-variant': '#E65100',
                        background: '#F5F5F5',
                        surface: '#FFFFFF',
                        'on-surface': '#212121',
                        'on-surface-variant': '#757575',
                        border: '#E0E0E0',
                        success: '#4CAF50',
                        warning: '#FFC107',
                        error: '#F44336',
                        info: '#2196F3'
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .android-card {
                @apply bg-surface rounded-2xl shadow-sm p-4;
            }
            .android-button {
                @apply bg-primary text-white py-3 px-6 rounded-lg font-medium transition-all duration-200 active:scale-95;
            }
            .android-button-secondary {
                @apply bg-white text-primary border border-primary py-3 px-6 rounded-lg font-medium transition-all duration-200 active:scale-95;
            }
            .android-button-accent {
                @apply bg-secondary text-white py-3 px-6 rounded-lg font-medium transition-all duration-200 active:scale-95;
            }
            .quote-card {
                @apply bg-white rounded-lg shadow-sm border border-border overflow-hidden;
            }
            .quote-section {
                @apply border-b border-border;
            }
            .quote-section:last-child {
                @apply border-b-0;
            }
            .price-item {
                @apply flex justify-between py-2 border-b border-border/50;
            }
            .price-item:last-child {
                @apply border-b-0;
            }
            .edit-button {
                @apply text-primary text-sm font-medium flex items-center;
            }
        }
    </style>
</head>
<body class="bg-background font-roboto text-on-surface min-h-screen">
    <!-- Android 状态栏 -->
    <div class="bg-primary h-7 w-full flex items-center justify-between px-4">
        <div class="text-white text-xs">18:30</div>
        <div class="flex items-center space-x-1">
            <i class="fa fa-signal text-white text-xs"></i>
            <i class="fa fa-wifi text-white text-xs"></i>
            <i class="fa fa-battery-three-quarters text-white text-xs"></i>
        </div>
    </div>

    <!-- 顶部导航栏 -->
    <header class="bg-primary text-white shadow-md">
        <div class="flex items-center h-14 px-4">
            <button id="backButton" class="mr-4">
                <i class="fa fa-arrow-left text-lg"></i>
            </button>
            <div class="text-lg font-semibold flex-1 text-center mr-4">报价单预览</div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="p-4 space-y-4 pb-24">
        <!-- 报价单标题 -->
        <div class="android-card text-center">
            <h1 class="text-2xl font-bold mb-2">直升机销售报价单</h1>
            <p class="text-on-surface-variant text-sm">报价单号: QU-20230615-001</p>
            <p class="text-on-surface-variant text-sm">生成日期: 2023年6月15日</p>
        </div>

        <!-- 客户信息 -->
        <div class="quote-card">
            <div class="p-4 quote-section">
                <div class="flex justify-between items-center mb-3">
                    <h2 class="text-lg font-semibold">客户信息</h2>
                    <button class="edit-button">
                        <i class="fa fa-pencil mr-1"></i> 编辑
                    </button>
                </div>
                <div class="grid grid-cols-1 gap-2 text-sm">
                    <div class="flex">
                        <span class="w-24 text-on-surface-variant">客户名称:</span>
                        <span class="font-medium">中国通用航空有限公司</span>
                    </div>
                    <div class="flex">
                        <span class="w-24 text-on-surface-variant">联系人:</span>
                        <span>张经理</span>
                    </div>
                    <div class="flex">
                        <span class="w-24 text-on-surface-variant">联系电话:</span>
                        <span>138-0000-0000</span>
                    </div>
                    <div class="flex">
                        <span class="w-24 text-on-surface-variant">邮箱:</span>
                        <span>contact@example.com</span>
                    </div>
                </div>
            </div>

            <!-- 产品信息 -->
            <div class="p-4 quote-section">
                <div class="flex justify-between items-center mb-3">
                    <h2 class="text-lg font-semibold">产品信息</h2>
                    <button class="edit-button">
                        <i class="fa fa-pencil mr-1"></i> 编辑
                    </button>
                </div>
                <div class="flex mb-3">
                    <div class="w-24 h-24 rounded-lg overflow-hidden flex-shrink-0">
                        <img src="../../WingPick Pro/static/AC311A.png" alt="AC311A直升机" class="w-full h-full object-cover">
                    </div>
                    <div class="ml-3 flex-1">
                        <div class="grid grid-cols-1 gap-2 text-sm">
                            <div class="flex">
                                <span class="w-24 text-on-surface-variant">产品型号:</span>
                                <span class="font-medium product-model">AC311A</span>
                            </div>
                            <div class="flex">
                                <span class="w-24 text-on-surface-variant">产品类型:</span>
                                <span>轻型多用途直升机</span>
                            </div>
                            <div class="flex">
                                <span class="w-24 text-on-surface-variant">座位数:</span>
                                <span>6座</span>
                            </div>
                            <div class="flex">
                                <span class="w-24 text-on-surface-variant">最大航程:</span>
                                <span>700公里</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 配置摘要 -->
            <div class="p-4 quote-section">
                <div class="flex justify-between items-center mb-3">
                    <h2 class="text-lg font-semibold">配置摘要</h2>
                    <button class="edit-button">
                        <i class="fa fa-pencil mr-1"></i> 编辑
                    </button>
                </div>
                <div class="grid grid-cols-1 gap-3 text-sm">
                    <div>
                        <h3 class="font-medium text-primary mb-1">发动机配置</h3>
                        <p>标准发动机 (Honeywell HTS900)</p>
                    </div>
                    <div>
                        <h3 class="font-medium text-primary mb-1">内饰配置</h3>
                        <p>标准商务内饰，黑色真皮座椅，加热座椅，电动调节座椅</p>
                    </div>
                    <div>
                        <h3 class="font-medium text-primary mb-1">设备配置</h3>
                        <p>标准航电套装，自动驾驶系统，标准消防系统，应急浮筒</p>
                    </div>
                    <div>
                        <h3 class="font-medium text-primary mb-1">服务与保修</h3>
                        <p>标准保修 (2年或1000飞行小时)</p>
                    </div>
                </div>
            </div>

            <!-- 价格明细 -->
            <div class="p-4 quote-section">
                <div class="flex justify-between items-center mb-3">
                    <h2 class="text-lg font-semibold">价格明细</h2>
                    <button class="edit-button">
                        <i class="fa fa-pencil mr-1"></i> 编辑
                    </button>
                </div>
                <div class="text-sm">
                    <div class="price-item">
                        <span>基础产品价格</span>
                        <span>¥12,500,000</span>
                    </div>
                    <div class="price-item">
                        <span>内饰配置</span>
                        <span>¥0</span>
                    </div>
                    <div class="price-item">
                        <span>设备配置</span>
                        <span>¥0</span>
                    </div>
                    <div class="price-item">
                        <span>服务与保修</span>
                        <span>¥0</span>
                    </div>
                    <div class="price-item">
                        <span class="font-medium">小计</span>
                        <span class="font-medium">¥12,500,000</span>
                    </div>
                    <div class="price-item">
                        <span>增值税 (13%)</span>
                        <span>¥1,625,000</span>
                    </div>
                    <div class="price-item bg-primary/5 py-3 rounded">
                        <span class="font-bold text-lg">总价</span>
                        <span class="font-bold text-lg text-primary">¥14,125,000</span>
                    </div>
                </div>
            </div>

            <!-- 备注信息 -->
            <div class="p-4">
                <h2 class="text-lg font-semibold mb-3">备注信息</h2>
                <div class="text-sm text-on-surface-variant space-y-2">
                    <p>• 此报价有效期为30天</p>
                    <p>• 付款方式：30%预付款，70%交货前付清</p>
                    <p>• 交货周期：确认订单后4个月</p>
                    <p>• 交货地点：客户指定国内机场</p>
                    <p>• 本报价单最终解释权归制造商所有</p>
                </div>
            </div>
        </div>

        <!-- 底部操作按钮 -->
        <div class="fixed bottom-0 left-0 right-0 bg-surface p-4 border-t border-border">
            <div class="flex space-x-3">
                <button id="modifyButton" class="android-button-secondary flex-1">
                    <i class="fa fa-edit mr-1"></i> 修改配置
                </button>
                <button id="shareButton" class="android-button flex-1">
                    <i class="fa fa-share-alt mr-1"></i> 分享报价
                </button>
                <button id="exportButton" class="android-button-accent flex-1">
                    <i class="fa fa-file-pdf-o mr-1"></i> 导出PDF
                </button>
            </div>
        </div>
    </main>

    <!-- 导出PDF模态框 (默认隐藏) -->
    <div id="exportModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg p-5 w-11/12 max-w-md">
            <h3 class="text-lg font-semibold mb-4">导出PDF设置</h3>
            <div class="space-y-4 mb-5">
                <div>
                    <label class="block text-sm font-medium mb-1">导出选项</label>
                    <div class="space-y-2">
                        <div class="flex items-center">
                            <input type="checkbox" id="includeCover" checked class="w-4 h-4 text-primary mr-2">
                            <label for="includeCover" class="text-sm">包含封面</label>
                        </div>
                        <div class="flex items-center">
                            <input type="checkbox" id="includeSignature" checked class="w-4 h-4 text-primary mr-2">
                            <label for="includeSignature" class="text-sm">包含签名区域</label>
                        </div>
                        <div class="flex items-center">
                            <input type="checkbox" id="includeImages" checked class="w-4 h-4 text-primary mr-2">
                            <label for="includeImages" class="text-sm">包含产品图片</label>
                        </div>
                    </div>
                </div>
                <div>
                    <label for="watermark" class="block text-sm font-medium mb-1">水印</label>
                    <select id="watermark" class="w-full p-2 border border-border rounded-lg text-sm">
                        <option value="none">无水印</option>
                        <option value="confidential" selected>机密</option>
                        <option value="draft">草稿</option>
                        <option value="sample">样例</option>
                    </select>
                </div>
            </div>
            <div class="flex space-x-3">
                <button id="cancelExport" class="android-button-secondary flex-1">
                    取消
                </button>
                <button id="confirmExport" class="android-button-accent flex-1">
                    <i class="fa fa-download mr-1"></i> 确认导出
                </button>
            </div>
        </div>
    </div>

    <!-- 导出进度模态框 -->
    <div id="progressModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg p-5 w-11/12 max-w-md">
            <h3 class="text-lg font-semibold mb-2 text-center">正在生成PDF...</h3>
            <p class="text-sm text-gray-500 text-center mb-4">请稍候，这可能需要几秒钟</p>
            
            <div class="h-2 bg-gray-200 rounded-full mb-4">
                <div id="progressBar" class="h-full bg-primary rounded-full transition-all duration-300" style="width: 0%"></div>
            </div>
            
            <div class="flex justify-between items-center text-sm text-gray-500">
                <span id="progressText">0%</span>
                <button id="cancelProgress" class="text-primary">取消</button>
            </div>
        </div>
    </div>

    <!-- 导出成功模态框 -->
    <div id="successModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg p-5 w-11/12 max-w-md text-center">
            <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fa fa-check text-green-500 text-2xl"></i>
            </div>
            <h3 class="text-lg font-semibold mb-2">导出成功</h3>
            <p class="text-sm text-gray-500 mb-5">报价单已成功导出为PDF文件</p>
            
            <div class="space-y-3">
                <button id="openPdfButton" class="android-button flex-1">
                    <i class="fa fa-eye mr-1"></i> 打开PDF
                </button>
                <button id="sendEmailButton" class="android-button-secondary flex-1">
                    <i class="fa fa-envelope mr-1"></i> 发送邮件
                </button>
                <button id="closeSuccess" class="text-gray-500 text-sm py-2">
                    关闭
                </button>
            </div>
        </div>
    </div>

    <!-- 分享报价模态框 (默认隐藏) -->
    <div id="shareModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg p-5 w-11/12 max-w-md">
            <h3 class="text-lg font-semibold mb-4">分享报价</h3>
            <div class="space-y-3 mb-5">
                <div class="grid grid-cols-4 gap-3">
                    <div class="flex flex-col items-center p-3 bg-primary/5 rounded-lg cursor-pointer">
                        <i class="fa fa-weixin text-2xl text-green-600 mb-1"></i>
                        <span class="text-xs">微信</span>
                    </div>
                    <div class="flex flex-col items-center p-3 bg-primary/5 rounded-lg cursor-pointer">
                        <i class="fa fa-envelope text-2xl text-blue-500 mb-1"></i>
                        <span class="text-xs">邮件</span>
                    </div>
                    <div class="flex flex-col items-center p-3 bg-primary/5 rounded-lg cursor-pointer">
                        <i class="fa fa-link text-2xl text-primary mb-1"></i>
                        <span class="text-xs">复制链接</span>
                    </div>
                    <div class="flex flex-col items-center p-3 bg-primary/5 rounded-lg cursor-pointer">
                        <i class="fa fa-ellipsis-h text-2xl text-on-surface-variant mb-1"></i>
                        <span class="text-xs">更多</span>
                    </div>
                </div>
                <div class="p-3 bg-background rounded-lg">
                    <div class="flex justify-between items-center mb-2">
                        <label class="text-sm font-medium">有效期</label>
                        <select class="text-sm border border-border rounded p-1">
                            <option>7天</option>
                            <option selected>30天</option>
                            <option>90天</option>
                        </select>
                    </div>
                    <div class="flex items-center">
                        <input type="checkbox" id="allowEdit" class="w-4 h-4 text-primary mr-2">
                        <label for="allowEdit" class="text-sm">允许收件人修改配置</label>
                    </div>
                </div>
            </div>
            <div class="flex space-x-3">
                <button id="cancelShare" class="android-button-secondary flex-1">
                    取消
                </button>
                <button id="confirmShare" class="android-button flex-1">
                    <i class="fa fa-share-alt mr-1"></i> 确认分享
                </button>
            </div>
        </div>
    </div>

    <script>
        // 返回按钮点击事件
        document.getElementById('backButton').addEventListener('click', function() {
            window.history.back();
        });

        // 修改配置按钮点击事件
        document.getElementById('modifyButton').addEventListener('click', function() {
            // 返回到配置流程的第一步
            window.location.href = 'config-engine.html';
        });

        // 导出PDF按钮点击事件
        document.getElementById('exportButton').addEventListener('click', function() {
            document.getElementById('exportModal').classList.remove('hidden');
        });

        // 分享报价按钮点击事件
        document.getElementById('shareButton').addEventListener('click', function() {
            document.getElementById('shareModal').classList.remove('hidden');
        });

        // 关闭导出模态框
        document.getElementById('cancelExport').addEventListener('click', function() {
            document.getElementById('exportModal').classList.add('hidden');
        });

        // 关闭分享模态框
        document.getElementById('cancelShare').addEventListener('click', function() {
            document.getElementById('shareModal').classList.add('hidden');
        });

        // 确认导出PDF - 优化为带进度条的导出流程
        document.getElementById('confirmExport').addEventListener('click', function() {
            // 隐藏设置模态框
            document.getElementById('exportModal').classList.add('hidden');
            // 显示进度模态框
            document.getElementById('progressModal').classList.remove('hidden');
            
            // 模拟导出进度
            let progress = 0;
            const progressBar = document.getElementById('progressBar');
            const progressText = document.getElementById('progressText');
            
            const interval = setInterval(function() {
                progress += 5;
                progressBar.style.width = progress + '%';
                progressText.textContent = progress + '%';
                
                if (progress >= 100) {
                    clearInterval(interval);
                    // 隐藏进度模态框，显示成功模态框
                    setTimeout(function() {
                        document.getElementById('progressModal').classList.add('hidden');
                        document.getElementById('successModal').classList.remove('hidden');
                    }, 500);
                }
            }, 150);
        });

        // 处理取消进度按钮点击
        document.getElementById('cancelProgress').addEventListener('click', function() {
            document.getElementById('progressModal').classList.add('hidden');
        });

        // 处理打开PDF按钮点击
        document.getElementById('openPdfButton').addEventListener('click', function() {
            // 获取机型信息 (从产品信息部分提取)
            const aircraftModel = document.querySelector('.product-model')?.textContent || '直升机';
            
            // 生成当前时间戳
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            
            // 构建文件名
            const timestamp = year + month + day + hours + minutes + seconds;
            const fileName = `${timestamp}${aircraftModel}报价单.pdf`;
            
            alert(`PDF将在这里打开 - 模拟文件路径: ${fileName}`);
            document.getElementById('successModal').classList.add('hidden');
        });

        // 处理发送邮件按钮点击
        document.getElementById('sendEmailButton').addEventListener('click', function() {
            // 获取机型信息 (从产品信息部分提取)
            const aircraftModel = document.querySelector('.product-model')?.textContent || '直升机';
            
            // 生成当前时间戳
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            
            // 构建文件名
            const timestamp = year + month + day + hours + minutes + seconds;
            const fileName = `${timestamp}${aircraftModel}报价单.pdf`;
            
            alert(`将打开邮件客户端，附上PDF文件: ${fileName}`);
            document.getElementById('successModal').classList.add('hidden');
        });

        // 处理关闭成功模态框按钮点击
        document.getElementById('closeSuccess').addEventListener('click', function() {
            document.getElementById('successModal').classList.add('hidden');
        });

        // 确认分享
        document.getElementById('confirmShare').addEventListener('click', function() {
            document.getElementById('shareModal').classList.add('hidden');
            // 显示分享成功提示
            alert('分享链接已生成！');
        });

        // 编辑按钮点击事件
        const editButtons = document.querySelectorAll('.edit-button');
        editButtons.forEach(button => {
            button.addEventListener('click', function() {
                // 根据点击的编辑按钮，跳转到对应的配置页面
                const section = this.closest('.quote-section');
                if (section) {
                    const sectionTitle = section.querySelector('h2').textContent;
                    if (sectionTitle.includes('发动机') || sectionTitle.includes('产品')) {
                        window.location.href = 'config-engine.html';
                    } else if (sectionTitle.includes('内饰')) {
                        window.location.href = 'config-interior.html';
                    } else if (sectionTitle.includes('设备')) {
                        window.location.href = 'config-equipment.html';
                    } else if (sectionTitle.includes('服务')) {
                        window.location.href = 'config-service.html';
                    } else if (sectionTitle.includes('客户')) {
                        alert('客户信息编辑功能即将上线');
                    }
                }
            });
        });
    </script>
</body>
</html>